<template>
    <view class="page-home-index">
        <view class="bg">
            <view class="search-bar flex-between">
                <view class="mr-2 city" @click="proxy.$util.gotoPage('/packageA/city/list')">
                    <u-image width="32rpx" height="32rpx" :src="proxy.$icon.site"></u-image>
                    <text>{{ city.name }}</text></view>
                <view class="flex-1">
                    <view class="input">
                        <text>请输入关键字搜索</text>
                        <u-image width="40rpx" height="40rpx" :src="proxy.$icon.search"></u-image>
                    </view>
                </view>            
            </view>
            <view class="swiper m-4">
                <u-swiper :list="bannerList" :height="250"></u-swiper>
            </view>
        </view>
        <view class="list">
            <!-- <u-tabs :list="tab.list" :is-scroll="true" active-color="#333333" :active-item-style="{fontSize:'34rpx',fontWeight:'bold'}" v-model="tab.current" @change="changeTab"></u-tabs> -->
            <view class="my-tabs mt-2">
                <scroll-view class="scroll-block" scroll-x="true" :scroll-left="tab.left">
                        <view class="item" :class="tab.current == index ? 'current' : ''" v-for="(item,index) in tab.list" :key="index" @click="changeTab(index)"><text class="name">{{ item.name }}</text></view>
                </scroll-view>
            </view>
            <view class="py-4" v-if="tab.list[tab.current].records.length == 0">
                <u-empty text="暂无数据" mode="list"></u-empty>
            </view>
            <view class="fly-card" v-else>
                <view class="item" v-for="(item,index) in tab.list[tab.current].records" :key="index" @click="proxy.$util.gotoPage('/packageB/activity/detail',{id:item.id})">
                    <view class="thumb">
                        <u-image width="100%" height="300rpx" :src="proxy.$icon.cover1"></u-image>
                    </view>
                    <view class="content">
                        <view class="title font-bold ellipsis-1">{{ item.activitiesName }}</view>
                        <view class="flex-between mt-2 mb-3">
                            <view class="tags">
                                <u-tag class="tag-cyan tag-noborder mr-1" :text="proxy.$util.setName(item.activitiesType, optionData.activitiesType)" />
                                <u-tag v-if="item.isCheckinRequired == '1'" class="tag-red tag-noborder" text="签到" />
                            </view>
                            <view class="grey9"><u-icon name="map"></u-icon>0.5km</view>
                        </view>
                        <view class="desc">
                            <view>时间：<text class="c-black">{{ dayjs(item.startTime).format('MM/DD HH:mm') }} {{ proxy.$util.getWeekName(dayjs(item.startTime).day()) }}</text></view>
                            <view class="ellipsis-1">地点：<text class="c-black">{{ item.address }}</text></view>
                            <view>报名：<text class="c-black">5/{{ item.maxParticipants }}</text></view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <fly-tabbar ref="refFlyTabbar" :current="0"/>
    </view>
</template>
<script setup lang="ts">
import dayjs from 'dayjs';
import FlyTabbar from '@/components/FlyTabbar/index.vue'
const refFlyTabbar = ref();
import { onLoad, onShow, onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
import { useAppStore } from '@/stores/app';
import { useOptionData } from '@/stores/optionData';
const {proxy} = getCurrentInstance() as ComponentInternalInstance;
const appStore = useAppStore();
const optionDataStore = useOptionData();
let city = reactive({
    code: '',
    name: '',
})
let bannerList = reactive([
    {title: '1', image: proxy.$icon.banner},
    {title: '2', image: proxy.$icon.banner},
]);
let tab = reactive({
    list:[
        {name: '全部', records:[], current:1, size:10, total: 1},
    ],
    current: 0,
    left: 0,
});
let optionData = reactive({});
const getInitData = async () => {
  let activitiesType = await optionDataStore.getDictList('activitie_type');
  optionData.activitiesType = activitiesType;
  let list = activitiesType.map(item => {
    item.records = [];
    item.current = 1;
    item.size = 10;
    item.total = 1;
    return item;
  });
  list.unshift({
    id: null,
    name: '全部',
    records: [],
    current: 0,
    size: 10,
    total: 1
  });
  tab.list = list;
  getList('refresh');

}
const getConfig = () => {
    proxy.$http('get', '/app/index/config', {}, (data,msg) => {
        console.log(data);
    });
};
const changeTab = (i) => {
    tab.current = i;
    if(i < 3){
        tab.left = 0
    }else{
        tab.left = i * 30;
    }
    if(tab.list[tab.current].records.length == 0){
        getList('refresh');
    }
};
const getList = (type) => {
    let obj = tab.list[tab.current];
      if(type == 'refresh'){  
        obj.current = 1;
        obj.list = [];
      }else{
        if(obj.total > obj.records.length){
          obj.current ++;        
        }else{
          uni.showToast({title:'没有更多了',icon: 'none'});
          return;
        }
      };
      let params = {
        current: obj.current,
        size: obj.size,
        activityType: obj.id,
        abcode: city.code, //当前所在城市code
        activitiesMethod: 0, //0:线上, 1:线下
        status: 1, // 0: 草稿, 1: 待审核, 2: 审核通过, 3: 审核不通过
        // guildId: null, // 公会Id
      };
      console.log('params', params);
      proxy.$http('get', '/admin/activities/xcxPage', proxy.$util.getParam(params) ,(data,msg) => {
        obj.records = obj.records.concat(data.records);
        obj.total = data.total;
      },msg => {

      })
};
const gotoPage = (item) => {
    proxy.$util.gotoPage('/packageB/activity/detail')
}
onPullDownRefresh(() => {
	getList('refresh');
	setTimeout( () => {
		uni.stopPullDownRefresh();
	}, 1000);
});
onReachBottom(() =>{
    console.log('底部加载')
	getList();
});
onShow(() =>{
    getConfig();
    appStore.getUserInfo();
    getInitData();
    city = appStore.currentCity;
});
</script>